<template>
<div class="timeLineContent">
    <el-date-picker class="selector"
    popper-class="oneMonthSelector"
    v-model="selectDateTime" type="datetimerange" 
    value-format="yyyy-MM-dd HH:mm:ss" 
    @change="SelectTimeChange"
    start-placeholder="选择开始时间" 
    end-placeholder="选择结束时间" style="width: 300px;height:40px"
    >
    </el-date-picker>
    <!-- <el-date-picker
      class="selector"
      v-model="selectDateTime"
      type="datetime"
      @change="SelectTimeChange"
      placeholder="选择日期时间" style="width: 200px;">
    </el-date-picker> -->
    <template>
      <el-input-number style="bottom: 100px;left:400px" @change="speedChange" v-model="num" :step="1" :max="3" :min="1"></el-input-number>
    </template>
    <div class="timeLine">
      <el-row class="timeLine_row">
        <el-col :span="3">
          <div class="play">
            <i
              :title="
                nextStatus === 'play'
                  ? '播放'
                  : nextStatus === 'pause'
                  ? '暂停'
                  : ''
              "
              :class="
                nextStatus === 'play'
                  ? 'el-icon-video-play'
                  : nextStatus === 'pause'
                  ? 'el-icon-video-pause'
                  : ''
              "
              @click="onTimeControlClick(nextStatus)"
            ></i>
          </div>
        </el-col>
        <el-col :span="21" class="slider__tooltip_content">
          <div class="my-slider__tooltip" :style="style">
            <el-button class="my-slider__tooltip-wrapper" size="mini">
              {{ timeDataArray[timeControlLayerIndex] }}
            </el-button>
          </div>
          <el-slider
            :show-stops="true"
            v-model="timeControlLayerIndex"
            :show-tooltip="false"
            :min="min"
            :max="max"
            @change="onTimeControlChange"
          >
          </el-slider
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { getFormatDate, getFormatHourMinute, getFormatDateTime,getFormatDateTime_2 } from '@/utils/datetime'
  import { startPlayBack, pausePlayBack, endPlayBack, endpausePlayBack, updateSpeed} from "@/api/playback"
  export default {
  props: ["showLayers", ],
  data() {
    return {
      maxDate: null,
      minDate: null,
		  timeDataArray:[],
      selectDateTime:"",
      pauseState:0,
      nextStatus: "play",
      playBackId:"",
      isClockActive: false,
      timeControlLayerIndex: 0, //当前索引
      timeControlPauseTime: 2, // 播放时间间隔，秒
      playSpeed: 1000,
      min: 0,
      max: 3600,
      num:1
    };
  },

  mounted() {
    for(var i=0;i<3600;i++)
    {
      var datetime='2022-05-03 05:'+(i-i%60)/60+':'+i%60
      this.timeDataArray.push(datetime)
    }

  },
  methods: {
    syncPlayBackTime(datetime){
      this.timeControlLayerIndex=(new Date(datetime).getTime()-new Date(this.selectDateTime[0]).getTime())/1000
    },
    speedChange(){
      updateSpeed(this.playBackId, this.num)
    },
    updatePlayBackId(){
      this.playBackId=this.$parent.playBackId
      // console.log(this.playBackId)
    },
    SelectTimeChange(){
      // console.log(new Date(this.selectDateTime[1]).getTime()-new Date(this.selectDateTime[0]).getTime())
      if((new Date(this.selectDateTime[1]).getTime()-new Date(this.selectDateTime[0]).getTime())>1000 * 60 * 60)
      {
        this.$message('时间范围不能超过一个小时');
        this.selectDateTime=""
      }
      else 
      {
        endPlayBack(this.playBackId).then(response=>{
          this.$parent.clearData() 
          var timerange=(new Date(this.selectDateTime[1]).getTime()-new Date(this.selectDateTime[0]).getTime())/1000
          // console.log(this.selectDateTime[0])
          // console.log(new Date(this.selectDateTime).getHours())
          //发送结束请求
          this.timeDataArray=[]
          var hour=new Date(this.selectDateTime[0]).getHours()
          var minute=new Date(this.selectDateTime[0]).getMinutes()
          var second=new Date(this.selectDateTime[0]).getSeconds()
          var hour2=new Date(this.selectDateTime[1]).getHours()
          var minSec=minute*60+second
          this.max=timerange
          hour = hour < 10 ? '0' + hour : hour
          hour2 = hour2 < 10 ? '0' + hour2 : hour2
          for(var i=minSec;i<timerange+minSec+1;i++)
          {
            minute=(i-i%60)/60
            if(minute>=60)
            {
              minute-=60
              second=i%60
              minute= minute < 10 ? '0' + minute : minute
              second= second < 10 ? '0' + second : second
              var datetime=(getFormatDate(new Date(this.selectDateTime[1])))+' '+hour2+':'+minute+':'+second
            }
            else {
              minute= minute < 10 ? '0' + minute : minute
              second=i%60
              second= second < 10 ? '0' + second : second
              var datetime=(getFormatDate(new Date(this.selectDateTime[0])))+' '+hour+':'+minute+':'+second
            }
            this.timeDataArray.push(datetime)
          }
          // this.timeControlLayerIndex=new Date(this.selectDateTime).getMinutes()*60+new Date(this.selectDateTime).getSeconds()
          this.timeControlLayerIndex=0
          // if(this.nextStatus=='pause')
          this.nextStatus='play'
          this.isClockActive = false;
          this.pauseState=0
          // this.selectDateTime=''

        })

      }
      
    },
    onTimeControlClick(value) {
      switch (value) {
        case "play":
          // console.log(this.timeDataArray[this.timeControlLayerIndex])
          if(this.pauseState)
          endpausePlayBack(this.playBackId)      //发送暂停结束请求
          else  
          {
            startPlayBack(this.timeDataArray[this.timeControlLayerIndex],this.selectDateTime[0],this.selectDateTime[1],this.playBackId)     //发送重新开始请求
            this.$parent.onGoingTaskState=1
          }
          if (this.isClockActive) {
            this.$message("正在播放中");
          } else {
            this.isClockActive = true;
            this.nextStatus = "pause";
            //播放轮播
            this.timeClockTick();
          }
          break;
        case "pause":
          this.pauseState=1                  //发送暂停请求
          pausePlayBack(this.playBackId)
          this.isClockActive = false;
          this.nextStatus = "play";
          break;
        default:
          break;

          
      }
    },
    timeClockTick() {
      if (!this.isClockActive) {
        return;
      }
      this.showNextTimeLayer();
      setTimeout(
        this.timeClockTick,
        this.timeControlPauseTime * this.playSpeed
      ); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
    },
    showNextTimeLayer() {
      let timeControlLayerIndex = this.timeControlLayerIndex;
      let timeDataArray = this.timeDataArray;
      // timeControlLayerIndex++;
      if (timeControlLayerIndex >= timeDataArray.length) {
        timeControlLayerIndex = 0;
      }
      this.timeControlLayerIndex = timeControlLayerIndex;
      this.$emit("showLayers", this.timeDataArray[timeControlLayerIndex]);
    },
    onTimeControlChange(value) {
      this.timeControlLayerIndex = value;

      endPlayBack(this.playBackId).then(response=>{
        this.$parent.clearData()     //清空数据
        this.nextStatus='play'
        //发送结束请求
        this.pauseState=0
        this.isClockActive = false;
      })

      
      this.$emit("showLayers", this.timeDataArray[value]);
    },
    timestepToolTip(index) {
      return this.timeDataArray[index];
    },
  },
  watch: {
    value(newValue) {
      this.timeControlLayerIndex = newValue;
    },
  },
  computed: {
    
    style() {
      const length = this.max - this.min,
        progress = this.timeControlLayerIndex - this.min,
        left = (progress / length) * 100;
      // console.log(length, progress, left);
      return {
        paddingLeft: `${left}%`,
      };
    },
  },
  destroyed: function () {
    this.isClockActive = false;
  },
};
</script>
<style>
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table,
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header
  div {
  display: none;
}
.oneMonthSelector .el-picker-panel__content.el-date-range-picker__content.is-right
  .el-date-range-picker__header {
  width: 60px;
  top: -331px;
  left: 530px;
}
/* 设置整体日期面板的宽度 */
.oneMonthSelector .el-picker-panel.el-date-range-picker.el-popper {
  width: 522px;
}
.oneMonthSelector .el-date-range-picker__content.is-left {
  border-right: none;
}
.oneMonthSelector .el-picker-panel__content {
  width: 100% !important;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
.timeLineContent {
  position: absolute;
  bottom: 0px;
  .my-slider__tooltip {
    text-align: left;
    .my-slider__tooltip-wrapper {
      height: 32px;
      transform: translateX(-50%);
      top: -50%;
      background: rgba(0, 0, 0, 0.75);
      border-radius: 4px;
      color: #fff;
      padding: 6px 8px;
      border: none;
      outline: none;
      margin-bottom: 7px;
      &::after {
        position: absolute;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid rgba(0, 0, 0, 0.75);
        content: " ";
        display: block;
        width: 0;
        height: 0;
        bottom: -8px;
        left: 46px;
        pointer-events: auto;
      }
    }
  }
  .slider__tooltip_content {
    position: absolute;
    left: 89px;
    top: -39px;
    padding-right: 20px;
  }
  .el-slider__stop {
    margin-top: -1px;
  }
  .timeLine_row {
    margin-top: 15px;
  }
  .el-slider__runway {
    height: 4px;
  }
  .el-slider__button {
    width: 12px;
    height: 12px;
  }
}
.selector {
  position: fixed;
  bottom: 100px;
  left: 80px;
  width: 70px;
  height: 65px;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.timeLine {
  position: fixed;
  bottom: 10px;
  left: 50px;
  width: 700px;
  height: 65px;
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .play {
    text-align: center;
    background: #fff;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    i {
      font-size: 36px;
      margin: "auto";
      color: #0e6cac;
    }
  }
}
</style>